<template>
  <div class="listShowStyle">
    <div class="wordStyle"><h3>{{option.title}}</h3></div>
    <div class="dropDownLoadWrap">
      <el-scrollbar style="height:200px;">
        <div v-infinite-scroll="accountLoadMore" infinite-scroll-disabled="accountBusy" infinite-scroll-distance="10">
          <el-row class="listBg" :gutter="10" v-for="(item,index) in data" :key="index">
            <el-col :span="2" :offset="1">
              <span v-show="option.checkedFlag"><el-checkbox v-model="checkBoxFlag[index]"
                                                             @change="checkedListBn(index)"></el-checkbox></span>
            </el-col>
            <el-col :span="item1.span" v-for="(item1,index1) in option.accountList.simpleList" :key="index1">
              <div class="wordEllipsis">
                <span>{{item1.label}}：</span>
                <span>{{item1 | dataDicTrans(item)}}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="wordEllipsis"><span><button
                :class="[accountToggleClass[index] ? 'el-icon-caret-bottom' : 'el-icon-caret-top', 'color-red', 'arrow']"
                @click="clickItem(index)"></button></span></div>
            </el-col>
            <el-col :span="24">
              <div class="listDetailBg" v-if="listDetailShow[index]">
                <el-row :gutter="10">
                  <el-col :span="item2.span" v-for="(item2,index2) in option.accountList.resList" :key="index2">
                    <div class="wordEllipsis">
                      <span>{{item2.label}}：</span>
                      <span>{{item2 | dataDicTrans(detailData[index])}} </span></div>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="24">
                    <avue-crud
                      :data="detailData[index]?detailData[index].resList:[]"
                      :option="option.lossOptionTable"
                      :page="option.lossPageTable"
                      @on-load="onLoad"
                      @size-change="sizeChange"
                      @current-change="currentChange"
                    ></avue-crud>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'drop-down-load-crud',
    props: ['data', 'detailData', 'option'],
    data() {
      return {
        accountBusy: true,
        accountToggleClass: [],
        listDetailShow: [],
        checkBoxFlag: []
      }
    },
    methods: {
      // 列表滚动
      accountLoadMore() {
        console.log('下拉滚动日志。。。。。')
        this.accountBusy = true
        setTimeout(() => {
          this.accountBusy = false
        }, 2000)
      },
      onLoad(page) {
//        请求参数
//        page.currentPage
//        page.pageSize
        this.$emit('onLoad', page)
      },
      clickItem(index) {
        if (!this.listDetailShow[index]) {
          this.$emit('detailListBtn', index)
        }
        this.$set(this.accountToggleClass, index, !this.accountToggleClass[index])
        this.$set(this.listDetailShow, index, !this.listDetailShow[index])
      },
      checkedListBn(index) {
        console.log('checkBoxFlag is: ' + this.checkBoxFlag[index])
        if (this.checkBoxFlag[index]) {
          for (let i = 0; i < this.checkBoxFlag.length; i++) {
            if (i !== index) {
              this.$set(this.checkBoxFlag, i, false)
            }
          }
        }
        this.$emit('checkedListBtn', [index, this.checkBoxFlag[index]])
      },
      sizeChange(i) {
        this.$emit('sizeChangeDropDownLoadCrud', i)
      },
      currentChange(j) {
        this.$emit('currentChangeDropDownLoadCrud', j)
      },
    },
    watch: {
      data: {
        handler(newValue, oldValue) {
          console.log('监听父元素数据改变')
          // 父组件param对象改变会触发此函数
          this.accountBusy = true
          for (let i = 0; i < this.accountToggleClass.length; i++) {
            this.$set(this.accountToggleClass, i, false)
          }
          for (let i = 0; i < this.listDetailShow.length; i++) {
            this.$set(this.listDetailShow, i, false)
          }
          for (let i = 0; i < this.checkBoxFlag.length; i++) {
            this.$set(this.checkBoxFlag, i, false)
          }
        },
        deep: true
      },
      detailData: {
        handler(newValue, oldValue) {
//          this.detailData = newValue
        },
        deep: true
      }
    }
  }
</script>

<style scoped>
  /*超出省略*/
  .wordEllipsis {
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*width: 100%;*/
    /*height: 40px;*/
    line-height: 40px;
    /*white-space: nowrap;*/
    padding-left: 10px;
    word-break: break-all;
  }

  .el-col > span {
    width: 100%;
    height: 40px;
    line-height: 40px;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .listDetailBg {
    background-color: #fff;
    border: 1px #eaeff7 solid;
    bottom: 100px;
  }

  .arrow {
    transform: rotateX(180deg);
  }

  .dropDownLoadWrap {
    border: 1px #eee solid;
    margin-top: 20px;
  }

  .wordStyle {
    line-height: 30px;
    padding: 0 5px;
  }

  .listShowStyle {
    margin-top: 10px;
  }
</style>
